<template>
  <div
    ref="tableContainer"
    style="width: calc(100vw - 200px); height: 100vh"
  ></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as VTable from "@visactor/vtable";
import data from "../json/frozen.json";

defineOptions({
  name: "MyVTableSort",
});

const tableContainer = ref(null);

const columns = [
  {
    field: "Order ID",
    title: "Order ID",
    width: "auto",
    // mergeCell: true,
  },
  {
    field: "Customer ID",
    title: "Customer ID",
    width: "auto",
    // mergeCell: true,
  },
  {
    field: "Product Name",
    title: "Product Name",
    width: "auto",
    // mergeCell: true,
  },
  {
    field: "Category",
    title: "Category",
    width: "auto",
  },
  {
    field: "Sub-Category",
    title: "Sub-Category",
    width: "auto",
  },
  {
    field: "Region",
    title: "Region",
    width: "auto",
  },
  {
    field: "City",
    title: "City",
    width: "auto",
  },
  {
    field: "Order Date",
    title: "Order Date",
    width: "auto",
  },
  {
    field: "Quantity",
    title: "Quantity",
    width: "auto",
    sort: true,
  },
  {
    field: "Sales",
    title: "Sales",
    width: "auto",
    sort: true,
  },
  {
    field: "Profit",
    title: "Profit",
    width: "auto",
    sort: true,
  },
];

const option = ref({
  container: tableContainer.value,
  records: data,
  columns,
  widthMode: "standard",
});

onMounted(() => {
  option.value.container = tableContainer.value;
  const tableInstance = new VTable.ListTable(option.value);
});
</script>

